<template>
  <div>
    <div class="header">
      <van-row type="flex" gutter="10px" align="center" class="aaa">
        <van-col span="6" offset="1"><van-image round width="80px" height="80px" src="https://img01.yzcdn.cn/vant/cat.jpeg" /></van-col>
        <van-col  @click="onLand"><h2>{{a}}</h2 ></van-col>
        <van-col class="arrow" offset="10"><van-icon name="arrow" color="white" size="16px"/></van-col>
      </van-row>
    </div>
    <van-grid column-num="3" square>
      <van-grid-item icon="label-o" text="我的订单" />
      <van-grid-item icon="bill-o" text="优惠券" />
      <van-grid-item icon="goods-collect-o" text="礼品卡" />
      <van-grid-item icon="diamond-o" text="我的收藏" />
      <van-grid-item icon="flag-o" text="我的足迹" />
      <van-grid-item icon="contact" text="会员福利" />
      <van-grid-item icon="location-o" text="地址管理" @click="address" ></van-grid-item>
      <van-grid-item icon="warn-o" text="账号安全" />
      <van-grid-item icon="service-o" text="练习客服" />
      <van-grid-item icon="question-o" text="帮助中心" />
      <van-grid-item icon="smile-comment-o" text="意见反馈" />
      <van-grid-item icon="cross" text="退出登录" v-show="show" @click="signOut"/>

    </van-grid>
  </div>

</template>

<script>
  // import {mapState} from 'vuex'
  import Vue from 'vue';
  import {
    image,
    grid,
    GridItem,
    Col, Row ,Icon,Notify 
  } from 'vant';


  Vue.use(image);
  Vue.use(grid);
  Vue.use(GridItem);
  Vue.use(Col);
  Vue.use(Row);
  Vue.use(Icon);
  Vue.use(Notify );
  export default {
    name: "User",
    data(){
      return{
        
        a:'',
        show: true
      }
    },
    methods:{
      //点击登录
      onLand(){
        const result= localStorage.getItem('userInfo')
        if(!JSON.parse(result)){
          // console.log(JSON.parse(result))
          this.$router.push("/Login")
          }
      },
      signOut(){
        Notify({ type: 'primary', message: '退出成功' });
        localStorage.removeItem('userInfo')
        localStorage.removeItem('user')
        this.a = '点击登录'
        this.show = false
      },
      address(){
        if(this.a =='点击登录'){
          Notify({ type: 'primary', message: '请登录' });
        }else{
          this.$router.push("/Address")
          // console.log(1)
        }
      }
      
    },
    mounted(){
      
      const result= localStorage.getItem('userInfo')
        this.a = JSON.parse(result).nickname
        this.$bus.$emit('changeFlag',4)
    }

  }
</script>

<style lang="less" scoped>
  .header {
    height: 120px;
    background: rgb(29, 35, 36);
    .aaa{
      padding-top: 20px;
      position: relative;
      .arrow{
        position: absolute;
        right: 5px;
        top: 52px;
      }
      }
    h2 {
      color: white;
    }
  }
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    color: white;
  }
</style>